// 提供一个能够显示xtx-message组件的函数
// 这个函数将来导入直接使用，也可以挂载到vue实例属性上
// import Message from 'Message.js' Message({type:'error',text:'提示文字'})
// 或者this.$message({type:'error',tetx:'提示文字'})
import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'
// 准备DOM容器（在内存中）
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
// 追加到真实body里
document.body.appendChild(div)
// 定时器的标识
let timer = null
export default ({ type, text }) => {
  // 渲染组件 通过js的方式
  // 1.导入消息提示组件
  // 2.将导入的消息提示组件编译为虚拟节点
  // createVNode(组件，属性对象（props）)
  const vnode = createVNode(XtxMessage, { type, text })
  // 3.准备一个装载消息提示组件的容器
  // 4.将虚拟节点放在容器里：render(虚拟节点，DOM容器)
  render(vnode, div)
  // 清除定时器
  clearTimeout(timer)
  // 5.定时器 移除DOM容器的内容
  timer = setTimeout(() => {
    render(null, div)
  }, 2500)
}
